[WEB-5576] fix: remove optionsClassName from email and workspace forms; add custom scrollbar styles and shadow utility in globals.css #8240

prateekshourya29 · 2025-12-04T09:58:16Z

Description

Type of Change

Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

Style
- Scrollbars now hidden by default with new customizable size variants and utility classes
- Added shadow and blur effect utility classes for design flexibility
- Updated dropdown styling in email configuration and workspace creation areas

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…s; add custom scrollbar styles and shadow utility in globals.css

makeplane · 2025-12-04T09:58:24Z

Linked to Plane Work Item(s)

[WEB-5576] Dropdown width and scrollbar CSS issue in admin application

This comment was auto-generated by Plane

coderabbitai · 2025-12-04T09:58:39Z

Walkthrough

This pull request removes a styling prop from CustomSelect components in two forms and enhances the global stylesheet with new scrollbar utilities and custom shadow/blur classes. All changes are presentation-focused with no modifications to application logic or control flow.

Changes

Cohort / File(s)	Summary
CustomSelect prop removal `apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx`, `apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx`	Removed `optionsClassName="w-full"` prop from CustomSelect components. Styling of options dropdown width is now governed by default component behavior.
Global stylesheet utilities `apps/admin/styles/globals.css`	Added global scrollbar hiding rules (webkit and Firefox), introduced scrollbar size variants (scrollbar-xs, scrollbar-sm, scrollbar-md, scrollbar-lg with fixed dimensions), and added utility classes for shadow-custom and backdrop-blur-custom effects.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Verify that removing optionsClassName="w-full" doesn't introduce unintended width changes or UX regressions in email security and workspace creation dropdowns
Confirm global scrollbar styling rules don't conflict with existing component-level scrollbar behavior or accessibility features

Poem

🐰 Scrollbars hidden, styles refined,
CustomSelects redesigned,
New utilities in CSS arrays,
Styling tweaks brighten our days! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete. Only the bug fix checkbox is marked; critical sections like Description, Test Scenarios, and References are empty or contain only template comments.	Fill in the Description section with details about why optionsClassName was removed and what scrollbar changes were made. Add Test Scenarios section with verification steps and References linking issue WEB-5576.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes all three main changes in the PR: removing optionsClassName from forms and adding scrollbar/shadow styles to globals.css.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix-admin-dropdowns

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 739b1bf and 93c787d.

📒 Files selected for processing (3)

apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx (0 hunks)
apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx (0 hunks)
apps/admin/styles/globals.css (2 hunks)

💤 Files with no reviewable changes (2)

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Build and lint web apps
GitHub Check: Analyze (javascript)

🔇 Additional comments (3)

apps/admin/styles/globals.css (3)

299-301: Verify global scrollbar hide doesn't break existing components.

Hiding scrollbars globally via ::-webkit-scrollbar { display: none; } is a significant change. While the opt-in utility classes (.vertical-scrollbar, .horizontal-scrollbar, .scrollbar-xs/sm/md/lg) provide a way to re-enable them, confirm that:

All components that require scrollbars are using one of these utility classes.

The Firefox equivalent (scrollbar-width: none in the @-moz-document block) is properly scoped.

No unintended visual regressions occur in dropdown menus or other scrollable UI elements.

363-370: Scrollbar utility pattern is consistent and well-structured.

The new .scrollbar-xs variant follows the existing pattern used by .scrollbar-sm/md/lg and integrates cleanly with the global scrollbar handling. No issues identified.

372-374: Shadow utility is correctly defined.

The .shadow-custom class applies a valid box-shadow with RGBA values. The inline comment accurately documents the hex-to-RGB conversion.

coderabbitai · 2025-12-04T10:01:12Z

apps/admin/styles/globals.css

+.backdrop-blur-custom {
+  @apply backdrop-filter blur-[9px];
+}


⚠️ Potential issue | 🔴 Critical

Fix incorrect Tailwind syntax in .backdrop-blur-custom.

The correct Tailwind syntax for backdrop blur uses backdrop-blur-* utilities. The current code uses @apply backdrop-filter blur-[9px], which is incorrect: backdrop-filter is a CSS property (not a Tailwind utility), and blur-[9px] is for element blur, not backdrop blur.

Apply this diff to fix the syntax:

-.backdrop-blur-custom { - @apply backdrop-filter blur-[9px]; -} +.backdrop-blur-custom { + @apply backdrop-blur-[9px]; +}

Alternatively, use raw CSS if you prefer not to use @apply:

-.backdrop-blur-custom { - @apply backdrop-filter blur-[9px]; -} +.backdrop-blur-custom { + backdrop-filter: blur(9px); +}

🤖 Prompt for AI Agents

In apps/admin/styles/globals.css around lines 376-378, the .backdrop-blur-custom rule uses incorrect Tailwind syntax (@apply backdrop-filter blur-[9px]); remove the non-utility backdrop-filter and element blur utility and replace with the correct backdrop utility, e.g. use @apply backdrop-blur-[9px]; (or, if you prefer raw CSS, set backdrop-filter: blur(9px); directly) so the class applies a backdrop blur rather than an element blur.

makeplane#8240)

[WEB-5576] fix: remove optionsClassName from email and workspace form…

93c787d

…s; add custom scrollbar styles and shadow utility in globals.css

prateekshourya29 requested review from anmolsinghbhatia and sriramveeraghanta December 4, 2025 09:58

prateekshourya29 self-assigned this Dec 4, 2025

prateekshourya29 added the requires approval label Dec 4, 2025

coderabbitai bot reviewed Dec 4, 2025

View reviewed changes

anmolsinghbhatia approved these changes Dec 4, 2025

View reviewed changes

sriramveeraghanta approved these changes Dec 4, 2025

View reviewed changes

sriramveeraghanta merged commit bc96d34 into preview Dec 4, 2025
7 checks passed

sriramveeraghanta deleted the fix-admin-dropdowns branch December 4, 2025 10:06

ClarenceChen0627 pushed a commit to ClarenceChen0627/plane that referenced this pull request Dec 5, 2025

[WEB-5576] fix: remove optionsClassName from email and workspace forms (

5c95fc7

makeplane#8240)

ClarenceChen0627 pushed a commit to ClarenceChen0627/plane that referenced this pull request Dec 5, 2025

[WEB-5576] fix: remove optionsClassName from email and workspace forms (

d0253e4

makeplane#8240)

ClarenceChen0627 pushed a commit to ClarenceChen0627/plane that referenced this pull request Dec 5, 2025

[WEB-5576] fix: remove optionsClassName from email and workspace forms (

7b5ecfb

makeplane#8240)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[WEB-5576] fix: remove optionsClassName from email and workspace forms; add custom scrollbar styles and shadow utility in globals.css #8240

[WEB-5576] fix: remove optionsClassName from email and workspace forms; add custom scrollbar styles and shadow utility in globals.css #8240

Uh oh!

prateekshourya29 commented Dec 4, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

makeplane bot commented Dec 4, 2025

Uh oh!

coderabbitai bot commented Dec 4, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Dec 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[WEB-5576] fix: remove optionsClassName from email and workspace forms; add custom scrollbar styles and shadow utility in globals.css #8240

[WEB-5576] fix: remove optionsClassName from email and workspace forms; add custom scrollbar styles and shadow utility in globals.css #8240

Uh oh!

Conversation

prateekshourya29 commented Dec 4, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Summary by CodeRabbit

Uh oh!

makeplane bot commented Dec 4, 2025

Uh oh!

coderabbitai bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

prateekshourya29 commented Dec 4, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 4, 2025 •

edited

Loading